<template>
  <div class="center-bottom">
    <div class="center-bottom-title">{{data.标题}}</div>
    <div class="center-bottom-main" >
      <div class="center-bottom-container" ref="container">
        <dv-scroll-board v-if="config" :config="config"/>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { scrollBoard } from '@jiaminghi/data-view'
Vue.use(scrollBoard)

export default {
  name: 'center-bottom',
  cnName: '中间',
  props: {
    data: Object
  },
  data() {
    return {
      config: null
    }
  },
  methods: {
    init() {
      this.$nextTick(_ => {
        // const el = this.$refs.container
        // const width = el.offsetWidth
        // const height = el.offsetHeight

        this.config = {
          header: this.data.表头,
          data: this.data.内容,
          rowNum: 3,
          headerBGC: 'rgba(29, 163 ,255, 0.24)',
          oddRowBGC: 'rgba(29,163,255,0.1)',
          evenRowBGC: 'rgba(29,163,255,0.1)'
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style scoped lang="scss">
.center-bottom {
  width: 95%;
  height: 19%;
  background: url("~@/assets/qianjiang/bottom.png") no-repeat ;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;

  &-title {
    text-align: center;
    font-weight: bold;
    padding: 14px 0;
  }

  &-main {
    flex: 1;
    position: relative;
    padding: 0 8% 20px;
  }

  &-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  ::v-deep {
    .dv-scroll-board {
      border: 1px solid #0185df;
    }
    .header-item {
      border-bottom: 1px solid #0185df;
    }
    .header-item + .header-item {
      border-left: 1px solid #0185df;
    }

    .rows {

    }
    .ceil {
      border-bottom: 1px solid rgba(1, 133, 223, 0.2);

      &:not(:first-child){
        border-left: 1px solid #0185df;
      }
    }
  }
}
</style>
